<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.List"%> 
<%@ page import="java.util.ArrayList"%>
<%@ page import="java.util.Arrays"%>
<%@ page import="com.ece.beans.items.Item"%>
<%@ page import="com.ece.beans.items.Livre"%>
<%
	if (session.getAttribute("urlProject")==null) { session.setAttribute("urlProject","http://localhost:8080/KiwiPresentationWeb/"); }
	//if ( (session.getAttribute("connected")==null) || ( !((Boolean)session.getAttribute("connected")).booleanValue())) {
	//	response.sendRedirect(session.getAttribute("urlProject")+"connexion.jsp");
	//}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Kiwi Project - Liste de livres</title>
		<link rel="stylesheet" href="css/bootstrap.css"/>
		<link rel="stylesheet" href="css/global.css" type="text/css" media="screen" />
		<script type="text/javascript">
			function addToList() {
		        var select_1=document.getElementById("productList");
		        var select_2=document.getElementById("yourList");
	
		        if (select_1.selectedIndex != -1) {
	                var selectedOption=select_1.options[select_1.selectedIndex];
	                if (selectedOption != null) {
                        var newOption=new Option(selectedOption.innerHTML,selectedOption.value,false,false);
                        select_2.options[select_2.length]=newOption;
	                }
		        }
			}
		
			function removeFromList() {
		        var select_2=document.getElementById("yourList");
	
		        if (select_2.selectedIndex != -1) {
	                select_2.options[select_2.selectedIndex]=null;
		        }
			}
		
			function truncateList() {
		        var select_2=document.getElementById("yourList");
	
		        while (select_2.length>0) {
	                select_2.options[0]=null;
		        }
			}
			
			function saveList() {
				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4) {
						if (xhr.status == 200) {
							alert("Votre liste à été mise à jour !");
						}
						else {
							alert("Une erreur s'est produite !");
						}
					}
				}
				
				var select = document.getElementById("yourList");
				var items = "items=";
				for (var i=0;i<select.length;i++) {
					items+=select.options[i].value+";";
				}
				var data="";
				data += items.substr(0,items.length-1);
				data += "&user="+document.getElementById("username").value;

				xhr.open("POST","SaveListServlet",true);
				xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xhr.send(data);
			}
		</script>
		<!-- <link rel="stylesheet" href="css/ui-lightness/jquery-ui.css" type="text/css" media="screen" /> -->
	</head>
	
	<body>
		<h1 class="mainTitle">Kiwi Project</h1>
		<div class="hero-unit">
			<h2>Module de cr&eacute;ation de liste de livres !</h2>
			<p>Pour ajouter un livre &agrave; votre liste, s&eacute;lectionnez-le et cliquez sur le bouton "Ajouter &agrave; ma liste".</p>
		</div>
		<div class="row" style="margin-left:140px">
			<div class="span6">
				<h2>Livres disponibles</h2>
				<select size="7" id="productList" style="width:300px">
					<%
						List<Item> items = (ArrayList<Item>) request.getSession().getAttribute("items");
						for (int i=0;i<items.size();i++) {
							out.print("<option value='"+items.get(i).getReference()+"'>"+items.get(i).getLibelle()+" -- "+items.get(i).getPrix()+" &euro;</option>");
						}
					%>
				</select>
				<a class="btn success medium" href="" onClick="addToList(); return false;">Ajouter &agrave; ma liste &raquo;&raquo;</a>
			</div>
			<div class="span5">
				<h2>Votre liste</h2>
				<select size="7" id="yourList" style="width:300px">
				</select>
				<input type="hidden" value="<%out.print((String)session.getAttribute("username"));%>" id="username"/>
				<a class="btn error medium" href="" onClick="removeFromList(); return false;">&laquo;&laquo; Retirer de ma liste </a><br/>
				<a href="" onClick="truncateList();return false;">Vider la liste</a>
			</div>
			<div class="span4" style="margin-top: 80px; margin-left:140px;">
				<a class="btn primary large" href="" onClick="saveList(); return false;">Enregistrer ma liste</a><br />
				<a href="index.jsp">Revenir &agrave; l'accueil.</a>
			</div>
		</div>
		<footer>
        	<p>
        		<% 
        			if (session.getAttribute("username")!=null) { 
        				out.write("Connect&eacute; en tant que "+session.getAttribute("username").toString());
        				out.write(" - <a href=\""+ session.getAttribute("urlProject") +"logout.jsp\">Se d&eacute;connecter</a>");
        			}
        		%>
       		</p>
		</footer>		
	</body>
</html>